import React, { Component } from 'react'
import Qcevents from "../utils/qcevents"
import propTypes from "prop-types" // 做父子传参参数类型校验
// 写样式，css in js 
const style = {
    "marginLeft":"30px"
}
 class Top extends Component {
     static propTypes = {   // 参数类型校验，如果传递得类型不符合，会报错，any表示不限制任何类型
         send:propTypes.any
     }
     static defaultProps = { //  defaultProps叫默认参数，如果父组件没传参，就走这个里面定义得数据，如果传参了，就走的参数
        send:[{
            tit:"zhangsan "
        }]
     }  
     state = {
         activeIndex:0
     }
    firesend(ind){
        Qcevents.emit("zhao",ind)
        this.setState({
            activeIndex:ind
        })
    }
  render() {
    console.log(this.props.send);
    return (
      <div>
          {
              this.props.send &&  this.props.send.length ? this.props.send.map((item,index)=>{
                  return <span className={index==this.state.activeIndex?"active":""} key={index} style={style} onClick={this.firesend.bind(this,index)}>{item.tit}</span>
              }) : "暂无数据"
          }
      </div>
    )
  }
}

export default Top